<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- TDK三大标签 是每一个网站必备的 -->
    <title>小兔鲜儿 - 新鲜 惠民 快捷 ！</title>
    <!-- 这个关键词 别人搜索我们的关键词 -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,购物" />
    <!-- 网站介绍 -->
    <meta name="description" content="小兔鲜儿官网，致力于全球最大的食品、生鲜电商购物平台。" />
    <!-- 引入网页图标favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入base.css初始化文件 -->
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
    <!-- 页面的头部模块 -->
    <header>
        <!-- 1. 顶部导航 -->
        <div class="top-nav">
            <!-- 版心 -->
            <div class="container">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#">手机版</a></li>
                </ul>
            </div>
        </div>
        <!-- 2. 主导航 -->
        <div class="main-nav">
            <div class="container">
                <!-- 1. logo -->
                <div class="logo">
                    <h1>
                        <a href="#" title="小兔鲜儿官网">小兔鲜儿</a>
                    </h1>
                </div>
                <!-- 2. nav 导航 -->
                <nav class="nav">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">生鲜</a></li>
                        <li><a href="#">美食</a></li>
                        <li><a href="#">餐厨</a></li>
                        <li><a href="#">电器</a></li>
                        <li><a href="#">居家</a></li>
                        <li><a href="#">洗护</a></li>
                        <li><a href="#">孕婴</a></li>
                        <li><a href="#">服装</a></li>
                    </ul>
                </nav>
                <!-- 3. search 搜索 -->
                <div class="search">
                    <input type="text" placeholder="搜一搜" />
                </div>
                <!-- 4. car 购物车 -->
                <div class="cart">
                    <a href="#">
                        <span>9999999</span>
                    </a>
                </div>
            </div>
        </div>
    </header>
    <!-- 入口模块 -->
    <section class="entry">
        <div class="container">
            <!-- 1. 轮播图做法 -->
            <div class="banner">
                <!-- 图片模块 -->
                <ul>
                    <li>
                        <a href="#"><img src="uploads/banner_1.png"></a>
                    </li>
                </ul>
                <a href="#" class="prev"></a>
                <a href="#" class="next"></a>
                <ul class="circle">
                    <li></li>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 2. 侧边栏 -->
            <aside class="category">
                <ul>
                    <li><a href="#"><em>生鲜</em> 水果 蔬菜</a></li>
                    <li><a href="#"><em>美食</em> 面点 干果</a></li>
                    <li><a href="#"><em>餐厨</em> 数码产品</a></li>
                    <li><a href="#"><em>电器</em> 床品 四件套 被枕</a></li>
                    <li><a href="#"><em>居家</em> 奶粉 玩具 辅食</a></li>
                    <li><a href="#"><em>洗护</em> 洗发 洗护 美妆</a></li>
                    <li><a href="#"><em>孕婴</em> 奶粉 玩具</a></li>
                    <li><a href="#"><em>服饰</em> 女装 男装</a></li>
                    <li><a href="#"><em>杂货</em> 户外 图书</a></li>
                    <li><a href="#"><em>品牌</em> 品牌制造</a></li>
                </ul>
            </aside>
        </div>
    </section>
    <!-- 新鲜购物模块 -->
    <div class="container">
        <section class="xtx-panel-box">
            <div class="box-hd">
                <h3>
                    新鲜好物
                    <small>新鲜出炉 品质靠谱</small>
                </h3>
                <a href="#" class="more">查看更多</a>
            </div>
            <div class="box-bd">
                <ul>
                    <li>
                        <a href="#">
                            <img src="uploads/new_goods_1.jpg">
                            <h4>睿米无线吸尘器F8</h4>
                            <p>￥<span>899</899span></p>
								<div class="new">新品</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="uploads/new_goods_2.jpg" >
								<h4>睿米无线吸尘器F8</h4>
								<p>￥<span>899</899span></p>
								<div class="new">新品</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="uploads/new_goods_3.jpg" >
								<h4>睿米无线吸尘器F8</h4>
								<p>￥<span>899</899span></p>
								<div class="new">新品</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="uploads/new_goods_4.jpg" >
								<h4>睿米无线吸尘器F8</h4>
								<p>￥<span>899</899span></p>
								<div class="new">新品</div>
							</a>
						</li>
					</ul>
				</div>
			</section>
			<!-- 人气推荐模块 -->
			<section class="xtx-panel-box renqi">
				<div class="box-hd">
					<h3>
						人气推荐
						<small>人气爆款 不容错过</small>
					</h3>
				</div>
				<div class="box-bd">
					<ul>
						<li>
							<a href="#">
								<img src="./uploads/popular_1.jpg" >
								<h4>特惠推荐</h4>
								<span class="info">我猜得到 你的需要</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/popular_2.jpg">
                            <h4>特惠推荐</h4>
                            <span class="info">我猜得到 你的需要</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/popular_3.jpg">
                            <h4>特惠推荐</h4>
                            <span class="info">我猜得到 你的需要</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/popular_4.jpg">
                            <h4>特惠推荐</h4>
                            <span class="info">我猜得到 你的需要</span>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 生鲜模块 -->
        <section class="xtx-panel-box">
            <div class="box-hd">
                <h3>
                    生鲜
                </h3>
                <!-- 小导航栏 -->
                <ul>
                    <li><a href="#" class="active">水果</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">裤装</a></li>
                    <li><a href="#">衬衫</a></li>
                    <li><a href="#">T恤</a></li>
                    <li><a href="#">内衣</a></li>
                </ul>
                <a href="#" class="more">查看更多</a>
            </div>
            <div class="goods">
                <div class="goods-l">
                    <a href="#">
                        <img src="./uploads/fresh_goods_cover.jpg">
                    </a>
                </div>
                <div class="goods-r">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_2.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_1.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_3.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_4.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_5.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_6.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_7.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/fresh_goods_8.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 服饰模块 -->
        <section class="xtx-panel-box">
            <div class="box-hd">
                <h3>
                    服装
                </h3>
                <!-- 小导航栏 -->
                <ul>
                    <li><a href="#" class="active">水果</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">裤装</a></li>
                    <li><a href="#">衬衫</a></li>
                    <li><a href="#">T恤</a></li>
                    <li><a href="#">内衣</a></li>
                </ul>
                <a href="#" class="more">查看更多</a>
            </div>
            <div class="goods">
                <div class="goods-l">
                    <a href="#">
                        <img src="./uploads/clothes_goods_cover.jpg">
                    </a>
                </div>
                <div class="goods-r">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_1.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_2.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_3.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_4.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_5.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_6.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_7.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="uploads/clothes_goods_8.jpg">
                                </div>
                                <h4>
                                    红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只
                                </h4>
                                <p>火锅食材</p>
                                <div class="price">
                                    ￥<span>199</span>
                                </div>
                            </a>
                            <div class="find-baby">
                                <h5>找相似</h5>
                                <p><a href="#">发现更多宝贝 ></a></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
    <!-- 页面底部模块 -->
    <footer>
        <!-- 上 concat 模块 -->
        <div class="concat">
            <!-- 版心 -->
            <div class="container">
                <dl class="service">
                    <dt>客户服务</dt>
                    <dd class="kefu">
                        在线客服
                    </dd>
                    <dd class="fankui">
                        问题反馈
                    </dd>
                </dl>
                <dl class="service">
                    <dt>客户服务</dt>
                    <dd class="kefu">
                        在线客服
                    </dd>
                    <dd class="fankui">
                        问题反馈
                    </dd>
                </dl>
                <dl class="service">
                    <dt>客户服务</dt>
                    <dd class="kefu">
                        在线客服
                    </dd>
                    <dd class="fankui">
                        问题反馈
                    </dd>
                </dl>
                <dl class="service">
                    <dt>客户服务</dt>
                    <dd class="kefu">
                        在线客服
                    </dd>
                    <dd class="fankui">
                        问题反馈
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 下 底部主模块 -->
        <div class="footer-bd">
            <div class="container">
                <section class="slogan">
                    <ul>
                        <li>价格亲民</li>
                        <li>物流快捷</li>
                        <li>品质新鲜</li>
                    </ul>
                </section>
                <div class="copyright">
                    <p>
                        <a href="#">关于我们</a>|
                        <a href="#">帮助中心</a>|
                        <a href="#">售后服务</a>|
                        <a href="#">配送与验收</a>|
                        <a href="#">搜索推荐</a>|
                        <a href="#">友情链接</a>
                    </p>
                    <p>CopyRight @ 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>